<template>
    <div class="role mt-list">

        <div class="mt-list-filter">
            <el-form ref="form" :model="filter" label-width="80px">
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="角色名称">
                            <mt-input v-model="filter.name" :width="inputWidth"></mt-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="18">
                        <div class="mt-list-filter-btn">
                            <mt-button @click="addBtn">新建</mt-button>
                            <mt-button @click="readList">搜索</mt-button>
                            <mt-button type="submain" @click="resetSearch">重置</mt-button>
                        </div>
                    </el-col>
                </el-row>
            </el-form>
        </div>

        <el-table
            :data="list"
            height="auto"
            class="mt-list-table table">
            <el-table-column prop="roleId" label="角色id" min-width="300"></el-table-column>
            <el-table-column prop="name" label="角色名称" min-width="180"></el-table-column>
            <el-table-column prop="description" label="角色描述" min-width="180"></el-table-column>
            <el-table-column prop="status" label="状态" min-width="180">
                <template v-slot="scope">
                    <el-switch
                        v-model="scope.row.status"
                        active-text="启用"
                        inactive-text="停用"
                        :active-value="1"
                        :inactive-value="0"
                        @change="handleStatusChange(scope.row)">
                    </el-switch>
                </template>
            </el-table-column>
            <el-table-column prop="updateTime" label="最后更新" min-width="220"></el-table-column>
            <el-table-column prop="createTime" label="创建时间" min-width="220"></el-table-column>
            <el-table-column fixed="right" label="操作" width="180">
                <template v-slot="scope">
                    <mt-button type="table" @click="goEdit(scope.row)">编辑</mt-button>
                    <mt-button type="table" @click="goDelete(scope.row)">删除</mt-button>
                    <mt-button type="table" @click="setPermisison(scope.row)">配置</mt-button>
                </template>
            </el-table-column>
        </el-table>

        <div class="mt-list-footer">
            <div class="totaldata">共{{ total }}条</div>
            <div class="page">
                <el-pagination
                    style="float: right"
                    :current-page="page"
                    :page-size="pageSize"
                    :page-sizes="pageSizes"
                    :total="total"
                    background
                    :layout="pageLayout"
                    class="mt-page"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </div>

        <role-dialog ref="roleDialog" @update="readList"></role-dialog>
        <permission-dialog ref="permissionDialog" @update="readList"></permission-dialog>

    </div>
</template>

<script>
import RoleDialog from "./dialog.vue";
import PermissionDialog from "./permission.vue";
import { listMixin } from "@/mixins/list-mixins";
export default {
    name: "RoleList",

    components: { RoleDialog, PermissionDialog },

    data () {
        return {
            filter: {
                name: ""
            },
            inputWidth: "calc(100% - 1rem)"
        };
    },

    mixins: [ listMixin ],

    created () {
        this.readList();
    },

    mounted () {},

    methods: {
        /* 获取列表 */
        async readList () {
            const params = {
                name: this.filter.name,
                page: this.page,
                pageSize: this.pageSize
            };
            this.$request.post(this.API.GET_ROLE_LIST, params).then(res => {
                console.log("getRoleList:", res);
                this.list = res.data.data;
                this.total = res.data.total;
            });
        },

        /* 新建按钮 */
        addBtn () {
            this.$refs.roleDialog.open("add");
        },
        /* 编辑按钮 */
        goEdit (item) {
            this.$refs.roleDialog.open("edit", item);
        },
        /* 删除按钮 */
        goDelete (item) {
            this.$confirm("是否删除该角色？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                this.deleteRole(item);
            }).catch(() => {});
        },
        /* 删除角色 */
        async deleteRole (item) {
            const params = { roleId: item.roleId };
            this.$request.post(this.API.DELETE_ROLE, params).then(res => {
                if (res.success) {
                    this.$mtMessage.success("删除成功！");
                    this.readList();
                }
            });
        },

        /* 修改角色状态 */
        handleStatusChange (row) {
            const params = {
                roleId: row.roleId,
                status: row.status
            };
            this.$request.post(this.API.CHANGE_ROLE_STATUS, params).then(res => {
                if (res.success) {
                    this.$mtMessage.success("状态更新成功！");
                    this.readList();
                }
            });
        },

        /* 配置按钮 */
        setPermisison (item) {
            this.$refs.permissionDialog.open(item);
        }
    }
}
</script>

<style lang="scss">
@import "~@/styles/mt-list.scss";
</style>